<script setup lang="ts" name="Login">
import { ref, reactive } from 'vue';
import type { UserLoginData } from '@/api/user/type.ts';
import { useUserStore } from '@/store/modules/user.ts';
import { useQuasar, QForm } from 'quasar';
import { useRouter, useRoute } from 'vue-router';
import { useCompRef } from '@/utils/useCompRef.ts';
// 控制密码框显示与否
const isPwd = ref<boolean>(true);
// 用户输入数据
const userinfo: UserLoginData = reactive({
  username: 'admin',
  password: '111111'
});
const isLoading = ref<boolean>(false);
// 用户仓库
const userStore = useUserStore();
// 路由器
const $router = useRouter();
// 路由参数
const $route = useRoute();
// quasar
const $q = useQuasar();
// 表单元素
const loginForm = useCompRef(QForm); // 获取组件实例并拿到组件类型
async function userLogin() {
  // 验证不通过就不触发submit
  // 表单验证，为确保再调用一次验证
  await loginForm.value?.validate();
  // 验证不通过
  isLoading.value = true;
  try {
    await userStore.userLogin(userinfo);
    // 登录成功
    $q.notify({
      type: 'positive',
      message: '登录成功',
      position: 'top'
    });
    const path = ($route.query.redirect as string) || '/';
    // 跳转路由到主页
    $router.replace(path);
  } catch (error) {
    $q.notify({
      type: 'negative',
      message: '用户名或密码错误',
      position: 'top'
    });
  } finally {
    isLoading.value = false;
  }
}
</script>

<template>
  <div class="container row">
    <div class="col-xs-0 col-sm"></div>
    <div class="col-xs-12 col-sm row flex-center q-px-md">
      <div class="login">
        <div class="text-h1">Hello</div>
        <div class="text-h3">欢迎来到硅谷甄选</div>
        <q-form
          ref="loginForm"
          class="login_form q-gutter-md"
          @submit="userLogin"
          no-error-focus
        >
          <q-input
            class="fill_width"
            label="用户名"
            outlined
            bg-color="white"
            v-model="userinfo.username"
            filled
            :rules="[
              val => !!val || '用户名不能为空',
              val => val.length >= 4 || '用户名长度不能少于4位'
            ]"
            lazy-rules="ondemand"
          >
            <template v-slot:prepend>
              <q-icon name="person" />
            </template>
          </q-input>
          <q-input
            class="fill_width"
            label="密码"
            outlined
            bg-color="white"
            :type="isPwd ? 'password' : 'text'"
            v-model="userinfo.password"
            filled
            :rules="[
              val => !!val || '密码不能为空',
              val => val.length >= 6 || '密码长度不能少于6位'
            ]"
            lazy-rules="ondemand"
          >
            <template v-slot:prepend>
              <q-icon name="lock" />
            </template>
            <template v-slot:append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              ></q-icon>
            </template>
          </q-input>
          <q-btn
            label="登录"
            type="submit"
            color="primary"
            class="fill_width"
            :loading="isLoading"
          />
        </q-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;

  .login {
    padding: 40px;
    color: white;
    background: url('@/assets/images/login_form.png') no-repeat;
    background-size: cover;

    .text-h3 {
      margin: 20px 0;
    }

    .login_form {
      padding: 0 50px;
      margin-top: 20px;

      .fill_width {
        width: 100%;
      }
    }
  }
}
</style>
